<template>
  <!-- <ImplementPressure /> -->
 <div class="home-wrap">
    <div class="header">
      <div class="left-box">
        <div class="name-box">
          <img src="@/assets/home/header-avatar@2.png" />
          <span>{{homeStore.schoolName}}</span>
        </div>
        <div class="time-box">
          <img src="@/assets/home/header-icon-time@2.png" />
          <span class="date">{{ data.dateText.date }}</span>
          <span class="date-time">{{ data.dateText.time }}</span>
          <span class="date-text">{{ data.dateText.text }}</span>
        </div>
      </div>
    </div>
    <div class="main-content">
      <div class="main-left-box">
        <LeakageAnalysis />
        <PerUseEnergy />
        <ImplementPressure />
      </div>
      <div class="main-right-box ">
        <div class="chart-list">
          <TopChart />
        </div>
        <div class="chart-mid">
          <div class="chart-mid-left">
            <LineChart style="margin-bottom: 11px;" :data="LineChart1" />
            <LineChart style="margin-bottom: 15px;" :data="LineChart2" />
            <OkTable />
          </div>
          <div class="chart-mid-right">
            <Notice />
            <EquipmentOverview />
          </div>
        </div>
      </div>
    </div>
    <Menu />
  </div>
</template>

<script setup>
import LeakageAnalysis from './component/leakageAnalysis.vue';
import LineChart from './component/lineChart.vue';
import TopChart from './component/topChart.vue';
import OkTable from './component/okTable.vue';
import Notice from './component/notice.vue';
import EquipmentOverview from './component/equipmentOverview.vue';
import PerUseEnergy from './component/perUseEnergy.vue';
import ImplementPressure from './component/implementPressure.vue';
import Menu from './component/menu.vue';
import { computed, onMounted, onUnmounted, reactive } from 'vue';
import moment from 'moment';
import { useHomeStore } from '@/Store/homeStore';

const homeStore = useHomeStore();

homeStore.initData();

let timer = null;
onMounted(() => {
  timer = setInterval(() => {
    homeStore.initData();
  }, 36000);
})

onUnmounted(() => {
  clearInterval(timer);
})


const LineChart1 = computed(() => {
  return {
    title: '节水数据',
    legendData: ['基准水量', '实际水量'],
    xAxisData: homeStore.waterSaveData.date,
    seriesData: [
      {
        name: '基准水量',
        type: 'line',
        data: homeStore.waterSaveData.base
      },
      {
        name: '实际水量',
        type: 'line',
        data: homeStore.waterSaveData.actual
      }
    ]
  };
})

const LineChart2 = computed(() => {
  return {
    title: '能耗走势',
    legendData: ['水', '电', '气', '标煤'],
    xAxisData: homeStore.energyTrendData.date,
    seriesData: [
      {
        name: '水',
        type: 'line',
        data: homeStore.energyTrendData.water
      },
      {
        name: '电',
        type: 'line',
        data: homeStore.energyTrendData.electricity
      },
      {
        name: '气',
        type: 'line',
        data: homeStore.energyTrendData.gas
      },
      {
        name: '标煤',
        type: 'line',
        data: homeStore.energyTrendData.standardCoal
      }
    ]
  };
})

const data = reactive({
  dateText: {
    date: '',
    time: '',
    text: '',
  }
})

const updateTime = () => {
  data.dateText.date = moment().format('YYYY年MM月DD日');
  data.dateText.time = moment().format('HH:mm');
  // 获取当前日期和时间
  const currentMoment = moment();
  // 获取小时数
  const hour = currentMoment.hour();
  if (hour >= 0 && hour < 12) {
      data.dateText.text = '上午';
  } else {
      data.dateText.text = '下午';
  }
}

onMounted(() => {
  setInterval(() => {
    updateTime();
  }, 1000);
})


</script>

<style lang="scss">
body {
  background: radial-gradient(50% 50% at 50% 50%, rgba(7, 45, 99, 1) 0%, rgba(9, 25, 48, 1) 100%);
}
</style>

<style lang="scss" scoped>
.home-wrap {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-width: 1920px;
  min-height: 1080px;
  background: url('@/assets/home/home-bg@2.png') no-repeat left top;
  background-size: 100% auto;
  overflow-x: hidden;
  & > .header{
    width: calc(100vw - 52px);
    height: 125px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    & > .left-box{
      width: 476px;
      height: 100%;
      img {
          display: inline-block;
          width: 32px;
          height: 32px;
          margin-left: 16px;
          margin-right: 18px;
      }
      .name-box{
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 32px;
        margin-bottom: 3px;
        font-size: 24px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 31.82px;
        color: rgba(0, 251, 255, 1);
        vertical-align: top;
        margin-top: 37px;
      }
      .time-box{
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 54px;
        left: 92px;
        font-size: 24px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 31.82px;
        color: rgba(0, 251, 255, 1);
        vertical-align: top;
        padding-top: 14px;
        box-sizing: border-box;
        background: url('@/assets/home/header-time@2.png') left top no-repeat;
        background-size: 100% 100%;
        .date {
          width: 196px;
          margin-right: 16px;
        }
        .date-time {
          margin-right: 8px;
          height: 30px;
          line-height: 31.82px;
        }
        .date-text{
          height: 32px;
          line-height: 31.82px;
        }
      }
    }
  }

  & > .main-content{
    width: 100%;
    height: calc(100vh - 130px);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    .main-left-box{
      width: 534px;
      height: calc(100% - 15px);
    }
    .main-right-box{
      width: calc(100% - 554px);
      height: calc(100% - 20px);
      display: flex;
      flex-direction: column;
      .chart-list{
        width: 100%;
        margin-top: 62px;
        margin-bottom: 40px;
        height: 142px;
      }
      .chart-mid{
        width: 100%;
        flex: 1;
        display: flex;
        .chart-mid-left{
          flex: 1;
          height: 100%;
          display: flex;
          flex-direction: column;
        }
        .chart-mid-right{
          width: 217px;
          margin: 51px 12px 0px 19px ;
        }
      }
    }
   }
}
</style>